<template>
  <div class="material-library-page">
    <!-- 页面标题 + 返回按钮 -->
    <div class="page-header">
      <h1 class="page-title">素材库</h1>
      <el-button type="text" class="return-btn" @click="handleReturn">返回</el-button>
    </div>

    <!-- 资源类型切换标签 -->
    <el-radio-group v-model="activeResourceType" class="resource-tabs">
      <el-radio-button label="image">图片</el-radio-button>
      <el-radio-button label="audio">音频</el-radio-button>
      <el-radio-button label="video">视频</el-radio-button>
    </el-radio-group>

    <!-- 图片分类筛选区 -->
    <div class="filter-section" v-if="activeResourceType === 'image'">
      <div class="section-title">图片（共1,253条）</div>
      
      <!-- 品牌分类筛选 -->
      <div class="filter-group">
        <span class="filter-label">品牌分类：</span>
        <el-tag
          v-for="brand in brandList"
          :key="brand"
          :class="activeBrands.includes(brand) ? 'active-tag' : ''"
          @click="toggleBrand(brand)"
          class="filter-tag"
        >
          {{ brand }}
        </el-tag>
        <el-tag
          :class="activeBrands.includes('临时素材库') ? 'active-tag' : ''"
          @click="toggleBrand('临时素材库')"
          class="filter-tag"
        >
          临时素材库
        </el-tag>
      </div>

      <!-- 图片格式筛选 -->
      <div class="filter-group">
        <span class="filter-label">图片格式：</span>
        <el-tag
          v-for="format in formatList"
          :key="format.type"
          :class="activeFormats.includes(format.type) ? 'active-tag' : ''"
          @click="toggleFormat(format.type)"
          class="filter-tag"
        >
          {{ format.type }} ({{ format.count }})
        </el-tag>
      </div>

      <!-- 排序筛选 -->
      <div class="filter-group">
        <span class="filter-label">品牌排序：</span>
        <el-tag
          v-for="sort in sortList"
          :key="sort.type"
          :class="activeSort === sort.type ? 'active-tag' : ''"
          @click="activeSort = sort.type"
          class="filter-tag"
        >
          {{ sort.name }} ({{ sort.count }})
        </el-tag>
      </div>
    </div>

    <!-- 操作按钮区 -->
    <div class="action-bar">
      <el-button type="success" size="mini" class="action-btn">新建</el-button>
      <el-button type="default" size="mini" class="action-btn">管理</el-button>
      <el-select v-model="selectedShop" placeholder="请选择美容院"   class="shop-select" style="width: 150px;">
        <el-option label="美容院A" value="shopA" />
        <el-option label="美容院B" value="shopB" />
      </el-select>
      <el-button type="primary" size="mini" class="sync-btn">一键同步</el-button>
      <div class="upload-area">
        <span class="size-tip">大小不超过3兆</span>
        <el-button type="primary" class="upload-btn">上传</el-button>
      </div>
    </div>

    <!-- 素材卡片展示区（放大尺寸） -->
    <div class="material-cards">
      <div class="card-item" v-for="(item, idx) in materialList" :key="idx">
        <img :src="item.image" alt="素材图片" class="card-img" />
        <div class="card-title">{{ item.title }}</div>
        <div class="card-desc">{{ item.desc }}</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';

// 资源类型切换（图片/音频/视频）
const activeResourceType = ref('image');

// 品牌分类筛选
const brandList = ref(['品牌A', '品牌B', '品牌C', '品牌D', '品牌E', '品牌F', '品牌G', '品牌H']);
const activeBrands = ref(['品牌A']); // 默认选中品牌A

// 图片格式筛选
const formatList = ref([
  { type: 'PSD', count: 9999 },
  { type: 'PNG', count: 9999 },
  { type: 'EPS', count: 9999 },
  { type: 'JPG', count: 9999 },
  { type: 'AI', count: 9999 },
  { type: 'TIF', count: 9999 },
  { type: 'CDR', count: 9999 },
  { type: 'PPTX', count: 9999 },
  { type: 'DOCX', count: 9999 },
  { type: 'IND', count: 9999 }
]);
const activeFormats = ref([]);

// 排序筛选
const sortList = ref([
  { type: 'comprehensive', name: '综合排序', count: 9999 },
  { type: 'latest', name: '最新上传', count: 9999 }
]);
const activeSort = ref('comprehensive');

// 美容院选择
const selectedShop = ref('');

// 素材卡片数据
const materialList = ref([
  {
    image: 'https://picsum.photos/seed/m1/600/400',
    title: '数据可视化模板',
    desc: 'PSD格式 | 品牌A | 综合排序'
  },
  {
    image: 'https://picsum.photos/seed/m2/600/400',
    title: '电子产品展示图',
    desc: 'PNG格式 | 品牌B | 最新上传'
  },
  {
    image: 'https://picsum.photos/seed/m3/600/400',
    title: '办公文具素材',
    desc: 'JPG格式 | 品牌C | 综合排序'
  },
  {
    image: 'https://picsum.photos/seed/m4/600/400',
    title: '笔记本电脑素材',
    desc: 'EPS格式 | 品牌D | 最新上传'
  },
  {
    image: 'https://picsum.photos/seed/m5/600/400',
    title: '励志文字海报',
    desc: 'AI格式 | 品牌E | 综合排序'
  }
]);

// 品牌分类切换
const toggleBrand = (brand) => {
  if (activeBrands.value.includes(brand)) {
    activeBrands.value = activeBrands.value.filter(item => item !== brand);
  } else {
    activeBrands.value.push(brand);
  }
  ElMessage.info(`已${activeBrands.value.includes(brand) ? '选中' : '取消'}品牌：${brand}`);
};

// 图片格式切换
const toggleFormat = (format) => {
  if (activeFormats.value.includes(format)) {
    activeFormats.value = activeFormats.value.filter(item => item !== format);
  } else {
    activeFormats.value.push(format);
  }
  ElMessage.info(`已${activeFormats.value.includes(format) ? '选中' : '取消'}格式：${format}`);
};

// 返回按钮
const handleReturn = () => {
  ElMessage.info('已返回上一级页面');
};
</script>

<style scoped>
.material-library-page {
  padding: 20px;
  font-family: "Microsoft Yahei", sans-serif;
  background: #fff;
  position: relative;
  min-height: 800px;
}

/* 页面标题 */
.page-header {
  margin-bottom: 20px;
}
.page-title {
  font-size: 18px;
  color: #333;
  font-weight: 600;
  margin: 0;
}
.return-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  padding: 0;
  color: #666;
}

/* 资源类型标签 */
.resource-tabs {
  margin-bottom: 20px;
  border-bottom: 1px solid #e5e6eb;
  padding-bottom: 4px;
}

/* 筛选区（核心优化：鼠标悬停效果） */
.filter-section {
  background: #f8f9fa;
  padding: 15px;
  border-radius: 4px;
  margin-bottom: 15px;
}
.section-title {
  font-size: 16px;
  color: #333;
  margin-bottom: 12px;
  font-weight: 500;
}
.filter-group {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.filter-label {
  color: #666;
  font-size: 14px;
  white-space: nowrap;
}

/* 筛选标签样式（重点：小手图标+悬停效果） */
.filter-tag {
  cursor: pointer; /* 鼠标放上去变小手 */
  transition: all 0.2s;
  padding: 4px 10px;
}
.filter-tag:not(.active-tag):hover {
  background: #e6f7ff; /* 未选中时hover浅蓝背景 */
  color: #1890ff; /* 未选中时hover蓝色文字 */
}
.active-tag {
  background: #409eff;
  color: #fff;
}

/* 操作按钮区 */
.action-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 10px;
}
.action-btn {
  margin-right: 8px;
}
.shop-select {
  width: auto;
  margin-right: 8px;
}
.sync-btn {
  margin-right: auto;
}
.upload-area {
  display: flex;
  align-items: center;
  gap: 8px;
}
.size-tip {
  font-size: 12px;
  color: #666;
}
.upload-btn {
  background: #722ed1;
  border-color: #722ed1;
}

/* 素材卡片区（核心优化：放大卡片尺寸） */
.material-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); /* 卡片宽度从200px增至280px */
  gap: 25px; /* 增大间距 */
  margin-top: 20px;
}
.card-item {
  border: 1px solid #e5e6eb;
  border-radius: 6px;
  overflow: hidden;
  transition: all 0.3s;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.card-item:hover {
  transform: translateY(-3px); /* 轻微上浮效果 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* 增强阴影 */
}
.card-img {
  width: 100%;
  height: 200px; /* 图片高度从150px增至200px */
  object-fit: cover;
}
.card-title {
  padding: 15px 15px 5px; /* 增大内边距 */
  font-size: 16px; /* 增大字体 */
  color: #333;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-desc {
  padding: 5px 15px 15px; /* 增大内边距 */
  font-size: 13px; /* 增大字体 */
  color: #666;
  line-height: 1.5;
}
</style>